<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="http://static.ginage.com/gauge/vendor/bootstrap/css/bootstrap.css">
    <!-- Font Awesome CSS-->
    <!-- <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css"> -->
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="http://static.ginage.com/gauge/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700"> -->
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="http://static.ginage.com/gauge/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="http://static.ginage.com/gauge/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="http://static.ginage.com/gauge/images/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page">
      <!-- Main Navbar-->
      
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
        <div class="content-inner">
          <!-- Page Header-->
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">量具总览</h2>
            </div>
          </header>
          <!-- Dashboard Counts Section-->
          <section class="dashboard-counts no-padding-bottom">
            <div class="container-fluid">
              <div class="row bg-white has-shadow">
                <!-- Item -->
                <div class="col-xl-3 col-sm-6">
                  <div class="item d-flex align-items-center">
                    <div class="icon bg-violet"><i class="icon-user">校正</i></div>
                    <div class="title"><span>本月<br>待校正量具</span>
                      <div class="progress" >
                        <div role="progressbar" id="total_of_need_to_calibrate_this_month_progress" style="width: 25%; height: 4px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
                      </div>
                    </div>
                    <div class="number" id="total_of_need_to_calibrate_this_month"><strong>25</strong></div>
                  </div>
                </div>
                <!-- Item -->
                <div class="col-xl-3 col-sm-6">
                  <div class="item d-flex align-items-center">
                    <div class="icon bg-red"><i class="icon-padnote">过期</i></div>
                    <div class="title"><span>已过期<br>量具</span>
                      <div class="progress" >
                        <div role="progressbar" id="total_of_expired_progress" style="width: 70%; height: 4px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
                      </div>
                    </div>
                    <div class="number" id="total_of_expired"><strong>70</strong></div>
                  </div>
                </div>
                <!-- Item -->
                <div class="col-xl-3 col-sm-6">
                  <div class="item d-flex align-items-center">
                    <div class="icon bg-green"><i class="icon-bill">丢失</i></div>
                    <div class="title"><span>已丢失<br>量具</span>
                      <div class="progress" >
                        <div role="progressbar" id="total_of_lost_progress" style="width: 40%; height: 4px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
                      </div>
                    </div>
                    <div class="number" id="total_of_lost"><strong>40</strong></div>
                  </div>
                </div>
                <!-- Item -->
                <div class="col-xl-3 col-sm-6">
                  <div class="item d-flex align-items-center">
                    <div class="icon bg-orange"><i class="icon-check">报废</i></div>
                    <div class="title"><span>已报废<br>量具</span>
                      <div class="progress" >
                        <div role="progressbar" id="total_of_scrapped_progress" style="width: 50%; height: 4px;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-orange"></div>
                      </div>
                    </div>
                    <div class="number" id="total_of_scrapped"><strong>50</strong></div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Dashboard Header Section    -->
          <section class="dashboard-header">
            <div class="container-fluid">
              <div class="row">
                <!-- Statistics -->
                <div class="statistics col-lg-3 col-12">
                  <div class="statistic d-flex align-items-center bg-white has-shadow">
                    <div class="icon bg-red"><i class="fa fa-tasks"></i></div>
                    <div class="text" id="total_of_gauge"><strong>234</strong><br><small>总量具数</small></div>
                  </div>
                  <div class="statistic d-flex align-items-center bg-white has-shadow">
                    <div class="icon bg-green"><i class="fa fa-calendar-o"></i></div>
                    <div class="text" id="total_of_bigGauge"><strong>87</strong><br><small>大型仪器</small></div>
                  </div>
                  <div class="statistic d-flex align-items-center bg-white has-shadow">
                    <div class="icon bg-orange"><i class="fa fa-paper-plane-o"></i></div>
                    <div class="text" id="total_of_commonGauge"><strong>147</strong><br><small>普通仪器</small></div>
                  </div>
                 
                </div>
                <!-- Line Chart            -->
                <div class="chart col-lg-6 col-12">
                  <div class="line-chart bg-white d-flex align-items-center justify-content-center has-shadow">
                    <canvas id="barCahrt"></canvas>
                  </div>
                </div>
                <div class="chart col-lg-3 col-12">
                  <!-- Bar Chart   -->
                  <div class="bar-chart has-shadow bg-white">
                    <div class="title"><strong class="text-violet">85%</strong><br><small>全年校正总览</small></div>
                    <canvas id="lineChartHome"></canvas>
                  </div>
                  <!-- Numbers-->
                  <div class="statistic d-flex align-items-center bg-white has-shadow">
                    <div class="icon bg-green"><i class="fa fa-line-chart"></i></div>
                    <div class="text"><strong>89.9%</strong><br><small>完成及时率</small></div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Projects Section-->
          <section class="projects no-padding-top">
					<div class="container-fluid">
						<!-- Project-->
						<div class="project">
							<div class="row bg-white has-shadow">
								<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
									<div class="project-title d-flex align-items-center">
										<div class="image has-shadow">
											<img src="http://static.ginage.com/gauge/images/xiao.png" alt="" class="img-fluid">
										</div>
										<div class="text">
											<h3 class="h4">校正校正</h3>
											<small>编号为:I040005AMC70的杠杆千分尺</small>
										</div>
									</div>
									<div class="project-date">
										<span class="hidden-sm-down">今天 08:00 AM</span>
									</div>
								</div>
							</div>
						</div>
						<!-- Project-->
						<div class="project">
							<div class="row bg-white has-shadow">
								<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
									<div class="project-title d-flex align-items-center">
										<div class="image has-shadow">
											<img src="http://static.ginage.com/gauge/images/xiao.png" alt="" class="img-fluid">
										</div>
										<div class="text">
											<h3 class="h4">校正校正</h3>
											<small>编号为:I040006AMC70的杠杆千分尺</small>
										</div>
									</div>
									<div class="project-date">
										<span class="hidden-sm-down">明天 08:00 AM</span>
									</div>
								</div>
							</div>
						</div>
					</div>

				</section>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="http://static.ginage.com/gauge/js/jquery.min.js"></script>
    <script src="http://static.ginage.com/gauge/vendor/popper.js/umd/popper.min.js"> </script>
    <script src="http://static.ginage.com/gauge/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="http://static.ginage.com/gauge/js/overview.js"></script>
   <!--  <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="js/charts-home.js"></script>
    Main File
    <script src="js/front.js"></script> -->
  </body>
</html>